<template>
	<view>
		<custom-header title="提现记录" />
		<view class="_wrap">
			<view class="header">
				<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/withdrawRecord_bg.png" mode="widthFix"></image>
				<view class="title">
					<text class="t1">提现记录</text>
					<text class="t2">Withdrawal record</text>
				</view>
			</view>
			<view class="title_time">
				<view class="title">提现记录</view>
				<view
					hover-class="confirm_hover"
					:hover-stay-time="200" 
					class="time" 
					@click="isShowSelectTime = true">
					<view class="text">{{ currentTime }}</view>
					<view class="icon">
						<image src="/static/common/bottom2.png" mode=""></image>
					</view>
				</view>
			</view>
			<scroll-view
				:scroll-y="true" 
				scroll-with-animation
				:style="{height:'calc(100vh - 305rpx - '+statusBarHeight+'px)'}" 
				class="scroll_content_wrap">
				<view class="list_wrap">
					<view 
						class="list" 
						v-for="(item,index) in listData" 
						:key="index"
						hover-class="custom_hover"
						:hover-stay-time="200"
						@click="handleDetail(item)">
						<view class="title_price">
							<view class="title">
								平台余额-提现
							</view>
							<view class="price">-￥{{ item.price }}</view>
						</view>
						<view class="info_wrap">
							<view class="info">
								<view class="lable">
									<view class="icon">
										<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/withdrawRecord_icon1.png" mode=""></image>
									</view>
									<view class="text">流水编号</view>
								</view>
								<view class="value">
									{{ item.orderNo }}
								</view>
							</view>
							<view class="info">
								<view class="lable">
									<view class="icon">
										<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/withdrawRecord_icon2.png" mode=""></image>
									</view>
									<view class="text">申请时间</view>
								</view>
								<view class="value">
									{{ item.createTime }}
								</view>
							</view>
							<view class="info">
								<view class="lable">
									<view class="icon">
										<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/wallet/withdrawRecord_icon3.png" mode=""></image>
									</view>
									<view class="text">申请状态</view>
								</view>
								<view class="value">
									<text class="status orange" v-if="item.status == 1">提现中</text>
									<text class="status red" v-if="item.status == 2">冻结中</text>
									<text class="status green" v-if="item.status == 3">成功</text>
									<text class="status red" v-if="item.status == 4">提现失败</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 选择时间 -->
		<custom-select 
			:show="isShowSelectTime" 
			:datas="columns" 
			@confirm="handleSelectConfirm"
			@close="isShowSelectTime = false"></custom-select>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { useStore } from 'vuex';
	const store = useStore()
	import { objectToQueryString } from '@/utils/util.js'
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const listData = ref([
		{
			id:1,
			price:15,
			orderNo:'390823012913758208T',
			createTime:'2025-05-10  22:35:12',
			// 1提现中 2冻结中 3成功 4提现失败
			status:1
		},
		{
			id:2,
			price:48,
			orderNo:'390823012913758208T',
			createTime:'2025-05-10  22:35:12',
			// 1提现中 2冻结中 3成功 4提现失败
			status:2
		},
		{
			id:2,
			price:999,
			orderNo:'390823012913758208T',
			createTime:'2025-05-10  22:35:12',
			// 1提现中 2冻结中 3成功 4提现失败
			status:3
		},
		{
			id:2,
			price:55,
			orderNo:'390823012913758208T',
			createTime:'2025-05-10  22:35:12',
			// 1提现中 2冻结中 3成功 4提现失败
			status:4
		},
		{
			id:2,
			price:55,
			orderNo:'390823012913758208T',
			createTime:'2025-05-10  22:35:12',
			// 1提现中 2冻结中 3成功 4提现失败
			status:4
		},
		{
			id:2,
			price:55,
			orderNo:'390823012913758208T',
			createTime:'2025-05-10  22:35:12',
			// 1提现中 2冻结中 3成功 4提现失败
			status:4
		},
		{
			id:2,
			price:55,
			orderNo:'390823012913758208T',
			createTime:'2025-05-10  22:35:12',
			// 1提现中 2冻结中 3成功 4提现失败
			status:4
		}
	])
	
	// 选择时间
	const currentTime = ref('本月')
	const isShowSelectTime = ref(false)
	const columns = ref(['本月','上月','下月','今年'])
	const handleSelectConfirm = (value)=>{
		currentTime.value = value
	}
	
	// 查看详情
	const handleDetail = (item)=>{
		uni.navigateTo({
			url:`/pages/withdrawRecordDetail/withdrawRecordDetail?${objectToQueryString({...item})}`
		})
	}
</script>

<style lang="scss">
	._wrap{
		padding: 0 20rpx;
	}
	.header{
		height: 200rpx;
		margin-top: 20rpx;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		.title{
			position: absolute;
			top: 40rpx;
			left: 60rpx;
			color: #fff;
			max-width: max-content;
			text-align: center;
			.t1{
				font-size: 40rpx;
				font-weight: bold;
				display: block;
			}
			.t2{
				font-size: 20rpx;
				display: block;
				padding-top: 5rpx;
			}
		}
	}
	.title_time{
		height: 80rpx;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		justify-content: space-between;
		.title{
			color: #333333;
			font-weight: bold;
		}
		.time{
			display: flex;
			align-items: center;
			.text{
				color: #999999;
				padding-right: 10rpx;
			}
			.icon{
				width: 20rpx;
				height: 11rpx;
				display: flex;
			}
		}
	}
	.list_wrap{
		padding-bottom: 20rpx;
		.list{
			border-radius: 20rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;
			padding: 0 20rpx;
			.title_price{
				display: flex;
				justify-content: space-between;
				color: #333333;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #F0F0F0;
				.title{
					font-size: 28rpx;
				}
				.price{
					font-weight: bold;
					font-size: 32rpx;
				}
			}
			.info_wrap{
				padding-bottom: 20rpx;
				.info{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #999999;
					padding-top: 20rpx;
					.lable{
						display: flex;
						align-items: center;
						.icon{
							width: 17rpx;
							height: 21rpx;
							display: flex;
						}
						.text{
							padding-left: 10rpx;
						}
					}
					.status{
						font-weight: bold;
					}
				}
				
			}
		}
	}
</style>
